<template>
    <div class="doc-manage">
        <div class="doc-manage-info">
            <div class="doc-manage-info__item">
                <div class="doc-manage-info__item--label">接口管理人：</div>
                <div class="doc-manage-info__item--value">{{ form.apiCreateBy }}</div>
            </div>
            <div class="doc-manage-info__item">
                <div class="doc-manage-info__item--label">所属分类：</div>
                <div class="doc-manage-info__item--value">{{ form.groupName || '-' }}</div>
            </div>
            <div class="doc-manage-info__item">
                <div class="doc-manage-info__item--label">数据源表：</div>
                <div class="doc-manage-info__item--value">{{ form.dataSource || '-' }}</div>
            </div>
        </div>
        <doc-detail-manage-user :doc-id="docId"></doc-detail-manage-user>
        <doc-detail-manage-version :doc-id="docId"></doc-detail-manage-version>
        <doc-detail-manage-history :doc-id="docId"></doc-detail-manage-history>
    </div>
</template>

<script>
import DocDetailManageUser from "@/views/service/doc/components/DocDetailManageUser"
import DocDetailManageVersion from "@/views/service/doc/components/DocDetailManageVersion"
import DocDetailManageHistory from "@/views/service/doc/components/DocDetailManageHistory"

export default {
    name: 'DocDetailManage',
    components: {
        DocDetailManageUser,
        DocDetailManageVersion,
        DocDetailManageHistory
    },
    props: {
        docId: {
            type: String,
            default: ''
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {}
    },
    methods: {
        fetchData() {}
    }
}
</script>

<style lang="scss" scoped>
.doc-manage {
    &-info {
        &__item {
            display: flex;
            align-items: center;

            &:not(:last-child) {
                margin: 1em 0;
            }

            &--label {
                width: 100px;
                flex-shrink: 0;
                color: #2c3e50;
                font-weight: bold;
                // text-align: right;
            }

            &--value {
                flex: 1;
            }
        }
    }
}
</style>